<template>
  <div>
    <label v-if="label" class="font-size-12 font-weight-400 line-height-120">{{ label }}</label>
    <v-select
      v-model="modelValue"
      :items="props.items"
      :item-title="props.itemTitle"
      :item-value="props.itemValue"
      :placeholder="props.placeholder"
      menu-icon="custom:arrowDown"
      variant="solo-filled"
      hide-details
      @update:menu="onMenuChange"
      class="mt-1"
    ></v-select>
  </div>
</template>
<script setup>
import { computed, nextTick } from 'vue'
import { VSelect } from 'vuetify/components'

const props = defineProps({
  modelValue: {
    required: true,
  },
  items: {
    type: Array,
    required: true,
  },
  itemTitle: {
    type: String,
    required: false,
    default: 'name',
  },
  itemValue: {
    type: String,
    required: false,
    default: 'code',
  },
  placeholder: {
    type: String,
    required: true,
  },
  label: {
    type: String,
  },
})
const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

/**
 * 在Select的Menu被打開的時候插入Class
 * 讓v-select的z-index可以大過PopupDialog
 * @param {Boolean} value
 */
const onMenuChange = (value) => {
  nextTick(() => {
    const elements = document.getElementsByClassName('v-overlay--active')
    console.log('onMenuChange', elements)
    if (elements.length <= 0) return
    if (value) elements[0].classList.add('v-select__z-index')
    else elements[0].classList.remove('v-select__z-index')
  })
}
</script>
<style scoped lang="scss">
.input-wrap {
  display: flex;
  flex-direction: column;
}
::v-deep(.v-field) {
  border-radius: 0.625rem;
  background: var(--bg-dialog, #181925);

  height: 2.5rem;
}

::v-deep(.v-field--error) {
  border-radius: 0.625rem;
  border: 0.0625rem solid rgb(var(--v-theme-primary-x));
  background: linear-gradient(0deg, rgba(235, 0, 27, 0.1) 0%, rgba(235, 0, 27, 0.1) 100%),
    rgb(var(--v-theme-background));
}

::v-deep(.v-field__field) {
  height: 2.5rem;
}

::v-deep(.v-field__input) {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;

  input {
    color: #ffffff;

    font-family: 'PingFang SC';
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.0125rem;
  }

  .v-select__selection {
    height: 1.25rem;
  }
}

::v-deep(.v-field__append-inner) {
  height: 2.5rem !important;
  display: flex;
  align-items: center;
  .v-select__menu-icon {
    background-image: url('../src/assets/icons/svg/mine/arrow-down.svg');
  }
}

::v-deep(.v-field__overlay) {
  opacity: 0 !important;
}
</style>
